<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
		<script src="../jquery/jquery-3.7.1.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.news {
				display: flex;
				height: 120px;
				width: 600px;
				margin: 0 auto;
				padding: 20px 0;
				cursor: pointer;
			}

			.news .left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-right: 10px;
			}

			.news .left .title {
				font-size: 20px;
			}

			.news .left .info {
				color: #999999;
			}

			.news .left .info span {
				margin-right: 20px;
			}

			.news .right {
				width: 160px;
				height: 120px;
			}

			.news .right img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		</style>
		<script>
			$(document).ready(function() {
				$.ajax({
					url: 'http://hmajax.itheima.net/api/news',
					type: 'GET',
					success: function(res) {
						console.log(res) // res是对象结果
						// 获取res中的新闻数据，循环添加li及内部元素
						addLi(res.data)
					},
					error: function(error) {
						console.log(error)
					},
				})
			})
			
			function addLi(arr) {
				// 先清空列表
				$('ul:first').html('')
				for (var i = 0; i < arr.length; i++) {
					var obj = arr[i]
					var html = "<li class='news'>" + 
								"<div class='left'>" + 
									"<div class='title'>" + 
										obj.title + 
									"</div>" + 
									"<div class='info'>" + 
										"<span>" + obj.source + "</span>" +
										"<span>" + obj.time + "</span>" +
									"</div>" + 
								"</div>" + 
								"<div class='right'>" + 
									"<img src='" + obj.img + "' alt=''>"
								"</div>" + 
							   "</li>" +
					$('ul:first').append(html)
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li class="news">
				<div class="left">
					<div class="title">5G商用在即，三大运营商营收持续下降</div>
					<div class="info">
						<span>新京报经济新闻</span>
						<span>2222-10-28 11:50:28</span>
					</div>
				</div>
				<div class="right">
					<img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
				</div>
			</li>
		</ul>
	</body>
</html><script>window.Dcloud_Html_preview_filename = "f%3A%5C%E8%AF%BE%E5%A0%82%5Cweb%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF%5Cweb_study%5C20241030%5C%E6%96%B0%E9%97%BB%E5%88%97%E8%A1%A8.html"</script><script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script>
	<script>
	class reloadPlugin {
		reload(path, options){
			return decodeURIComponent(Dcloud_Html_preview_filename) !== path;
		}
	}
	if (LiveReload){
		LiveReload.addPlugin(reloadPlugin)
	}

	</script>
	